<template>
  <div class="page-container">
    <div class="page-header">
      <h1>联系方式</h1>
      <p class="subtitle">我们随时为您提供帮助</p>
    </div>

    <div class="content-section">
      <div class="contact-methods-card">
        <h2>联系我们</h2>
        <div class="contact-methods">
          <div class="contact-method">
            <div class="contact-icon">📞</div>
            <div class="contact-info">
              <h3>电话咨询</h3>
              <p>周一至周五 9:00-18:00</p>
              <p class="contact-value">400-123-4567</p>
            </div>
          </div>
          <div class="contact-method">
            <div class="contact-icon">✉️</div>
            <div class="contact-info">
              <h3>电子邮件</h3>
              <p>我们将在24小时内回复</p>
              <p class="contact-value">contact@employeesystem.com</p>
            </div>
          </div>
          <div class="contact-method">
            <div class="contact-icon">💬</div>
            <div class="contact-info">
              <h3>在线客服</h3>
              <p>工作日 9:00-22:00</p>
              <button class="chat-button">开始对话</button>
            </div>
          </div>
          <div class="contact-method">
            <div class="contact-icon">🏢</div>
            <div class="contact-info">
              <h3>公司地址</h3>
              <p>上海市浦东新区张江高科技园区科苑路88号</p>
              <p>邮编：201203</p>
            </div>
          </div>
        </div>
      </div>

      <div class="contact-form-card">
        <h2>发送消息</h2>
        <p class="form-subtitle">填写以下表单，我们会尽快与您联系</p>
        
        <form class="contact-form">
          <div class="form-row">
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" id="name" placeholder="请输入您的姓名">
            </div>
            <div class="form-group">
              <label for="company">公司</label>
              <input type="text" id="company" placeholder="请输入您的公司名称">
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label for="email">电子邮件</label>
              <input type="email" id="email" placeholder="请输入您的电子邮件">
            </div>
            <div class="form-group">
              <label for="phone">电话</label>
              <input type="tel" id="phone" placeholder="请输入您的联系电话">
            </div>
          </div>
          
          <div class="form-group">
            <label for="subject">主题</label>
            <input type="text" id="subject" placeholder="请输入消息主题">
          </div>
          
          <div class="form-group">
            <label for="message">消息内容</label>
            <textarea id="message" rows="5" placeholder="请详细描述您的问题或需求"></textarea>
          </div>
          
          <div class="form-actions">
            <button type="submit" class="submit-button">发送消息</button>
          </div>
        </form>
      </div>
      
      <div class="map-card">
        <h2>公司位置</h2>
        <div class="map-container">
          <!-- This would be replaced with an actual map component -->
          <div class="map-placeholder">
            <div class="map-marker"></div>
            <p class="map-text">员工管理系统总部</p>
          </div>
        </div>
        <div class="location-info">
          <div class="location-item">
            <h3>交通方式</h3>
            <p>地铁：2号线张江高科站，出站后步行10分钟</p>
            <p>公交：张江1路、张江2路，科苑路站下车</p>
          </div>
          <div class="location-item">
            <h3>周边信息</h3>
            <p>周边有多家餐厅和咖啡厅</p>
            <p>附近有停车场，可提供访客停车服务</p>
          </div>
        </div>
      </div>
      
      <div class="faq-card">
        <h2>常见问题</h2>
        <div class="faq-list">
          <div class="faq-item">
            <h3>如何预约产品演示？</h3>
            <p>您可以通过填写联系表单或直接拨打我们的客服电话400-123-4567预约产品演示。我们的销售团队会根据您的需求安排合适的时间进行在线或现场演示。</p>
          </div>
          <div class="faq-item">
            <h3>产品支持哪些语言？</h3>
            <p>目前我们的系统支持简体中文、繁体中文和英文三种语言界面，并计划在未来增加更多语言支持。</p>
          </div>
          <div class="faq-item">
            <h3>如何获取技术支持？</h3>
            <p>付费用户可以通过专属客服电话、邮件或在线客服获取技术支持。我们提供7x24小时紧急技术支持服务。</p>
          </div>
          <div class="faq-item">
            <h3>是否提供定制开发服务？</h3>
            <p>是的，我们提供定制开发服务，可以根据企业特定需求进行功能定制和系统集成。具体请联系我们的销售团队了解详情。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: var(--app-secondary-text);
  margin-top: 0;
}

.content-section {
  display: grid;
  gap: 40px;
}

.contact-methods-card, .contact-form-card, .map-card, .faq-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--app-card-shadow);
}

h2 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--el-color-primary);
}

.form-subtitle {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--app-secondary-text);
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.contact-icon {
  font-size: 24px;
  min-width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 113, 227, 0.1);
  border-radius: 24px;
  margin-right: 16px;
}

.contact-info h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

.contact-info p {
  margin: 0 0 4px 0;
  color: var(--app-secondary-text);
  font-size: 14px;
}

.contact-value {
  font-weight: 500;
  color: var(--app-text-color) !important;
}

.chat-button {
  margin-top: 8px;
  background-color: var(--el-color-primary);
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-button:hover {
  background-color: var(--el-color-primary-dark);
}

.contact-form {
  margin-top: 24px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

input, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--app-border-color);
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--el-color-primary);
}

.form-actions {
  margin-top: 24px;
  text-align: right;
}

.submit-button {
  background-color: var(--el-color-primary);
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-button:hover {
  background-color: var(--el-color-primary-dark);
}

.map-container {
  height: 300px;
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.map-placeholder {
  height: 100%;
  background-color: #f5f5f7;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-marker {
  width: 24px;
  height: 24px;
  background-color: var(--el-color-primary);
  border-radius: 50%;
  position: relative;
}

.map-marker:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--el-color-primary);
}

.map-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 8px 16px;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.location-info {
  display: flex;
  gap: 24px;
}

.location-item {
  flex: 1;
}

.location-item h3 {
  font-size: 16px;
  margin: 0 0 12px 0;
}

.location-item p {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.faq-list {
  display: grid;
  gap: 16px;
}

.faq-item {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.faq-item h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--el-color-primary);
}

.faq-item p {
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .contact-methods, .form-row, .location-info {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  
  .contact-methods-card, .contact-form-card, .map-card, .faq-card {
    padding: 24px;
  }
  
  .map-container {
    height: 200px;
  }
}
</style>